<template>
  <div class="soundList" @click="goDetail(item.id)">
      <div class="cover">
          <img :src="item.front_cover" alt="">
      </div>
      <div class="detail">
          <div class="title">{{item.soundstr}}</div>
          <div class="tag">
              <div class="play-times">{{item.view_count_formatted}}</div>
              <div class="time-length">60:47</div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    props:['item'],
    methods:{
        goDetail(id){
            this.$router.push({
                name:"sound",
                params:{
                soundid:id
                }
            })
        }
    },
}
</script>

<style lang="stylus" scoped>
.soundList
    height .7rem
    line-height .7rem
    width 100%
    position relative
    display flex
    &:after
        content ""
        display block
        position absolute
        right 0
        bottom 0
        left .1rem
        border-bottom 1px solid #e0e0e0
    &:last-child:after
        border transparent
    .cover
        width .5rem
        height .5rem
        border-radius .04rem
        margin .1rem
        overflow hidden
        img 
            z-index 0
            display block
            width .5rem
            height .5rem
    .detail
        position relative
        padding .1rem 0
        height 100%
        width calc(100% - 0.7rem)
        color #424242
        .title
            width 94%
            height .36rem
            word-break break-all
            text-overflow ellipsis 
            overflow hidden
            display -webkit-box
            -webkit-box-orient vertical
            -webkit-line-clamp 2
            font-size .12rem
            line-height .18rem
            color #616161
        .tag
            height .12rem
            line-height .12rem
            display flex
            position absolute
            left 0
            right 0
            bottom 0.11rem
            .play-times,.time-length
                font-size .12rem
                color #9e9e9e
                margin-right .2rem
                display flex
                width .66rem
                overflow hidden
                text-overflow ellipsis 
                white-space nowrap
                &:before
                    content ""
                    display block
                    width .12rem
                    height .12rem
                    margin-right .04rem
            .play-times:before
                background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons-thumbnails@2x.8e0a6b22.png')
                background-position -0.44rem -0.27rem
                background-size 0.56rem 0.55rem
            .time-length:before
                background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons-thumbnails@2x.8e0a6b22.png')
                background-position  -0.29rem -0.44rem
                background-size 0.56rem 0.55rem

</style>